<template>
  <div class="search-result">
    <div class="search-box">
      <a-icon class="icon" type="left" @click="backSearch"/>
      <div class="search-box-middle">
        <div class="search-type">
          <span class="city">抚州</span>
          <span class="connect-word">的</span>
          <span class="trade">木质家具制造</span>
        </div>
        <div class="keyword">椅子</div>
      </div>
      <a-icon class="icon" type="environment" v-show="!showMap" @click="showMap=!showMap"/>
      <a-icon class="icon" type="unordered-list" v-show="showMap" @click="showMap=!showMap"/>
    </div>
    <navigation-map v-show="showMap"></navigation-map>
    <div class="switchover-result" v-show="!showMap">
      <div class="result-box">
        <div class="item" v-for="(item, index) in 3" :key="index">
          <div class="top" @click="companyInfo">
            <div class="top-left">
              <div class="title">江西速柏木业有限公司</div>
              <div class="address">江西省抚州市高新区南山街道南山大道56号 | 12.3km</div>
            </div>
            <div class="top-right">5.7</div>
          </div>
          <div class="middle" @click="companyInfo">
            <div class="middle-item">
              <div class="middle-item-top">木质家具制造</div>
              <div class="middle-item-bottom">行业</div>
            </div>
            <div class="line"></div>
            <div class="middle-item">
              <div class="middle-item-top">1000万元</div>
              <div class="middle-item-bottom">注册资本</div>
            </div>
            <div class="line"></div>
            <div class="middle-item">
              <div class="middle-item-top">2010.09.09</div>
              <div class="middle-item-bottom">注册时间</div>
            </div>
          </div>
          <div class="bottom" @click="companyInfo">
            <div class="bottom-item">
              <div class="bottom-item-top">创新指数</div>
              <div class="bottom-item-bottom">
                <a-rate class="rate" :default-value="4" disabled />
              </div>
            </div>
            <div class="bottom-item">
              <div class="bottom-item-top">规模指数</div>
              <div class="bottom-item-bottom">
                <a-rate class="rate" :default-value="5" disabled />
              </div>
            </div>
            <div class="bottom-item">
              <div class="bottom-item-top">司法风险</div>
              <div class="bottom-item-bottom" >无</div>
            </div>
            <div class="bottom-item">
              <div class="bottom-item-top">工商风险</div>
              <div class="bottom-item-bottom" >无</div>
            </div>
          </div>
        </div>
      </div>
			<div class="filtrate-btn-box">
				<a-button class="filtrate-btn" @click="filtrateClick">筛选企业（3）</a-button>
			</div>
      <a-modal class="myModal" v-model="visible" title="筛选企业" centered :closable="false" width="80%">
        <template slot="footer">
          <a-button class="left-btn" key="back" @click="handleReset">
            重置
          </a-button>
          <a-button class="right-btn" key="submit" type="primary" :loading="loading" @click="handleOk">
            确定
          </a-button>
        </template>
        <div class="filtrate-type-box">
          <div
            class="filtrate-type-item"
            v-for="(item, index) in filtrateTypeInfo"
            :key="index"
          >
            <div class="title">{{item.title}}</div>
            <div class="explain">{{item.explain}}</div>
            <div class="level">
              <div
                class="level-item"
                :class="{selected : levelIndex === item.levelIndex}"
                v-for="(levelItem, levelIndex) in levelWord"
                :key="levelIndex"
                @click="select(index, levelIndex)"
              >
                {{levelItem}}
              </div>
            </div>
          </div>
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script>
	import NavigationMap from './NavigationMap'

	export default {
		name: 'searchResult',
		components: {
			NavigationMap
		},
		props: ['showComponent'],
		data () {
			return {
				showMap: true, // 是否显示地图
				levelWord: ['不限', '一星', '二星', '三星', '四星', '五星'], // 级别
				filtrateTypeInfo: [
					{
						title: '创业指数',
						explain: '基于企业软著和专利数量、员工学历进行评估',
						levelIndex: 0
					},
					{
						title: '活跃指数',
						explain: '基于企业访客、车辆流动及员工画像进行评估',
						levelIndex: 0
					},
					{
						title: '规模指数',
						explain: '基于企业员工和厂区规模、客流及货流进行评估',
						levelIndex: 0
					},
					{
						title: '复工复产指数',
						explain: '基于企业员工到达率的时序分析进行评估',
						levelIndex: 0
					}
				], // 筛选信息
				visible: false, // 显示对话框
				loading: false
			}
		},
		methods: {
			filtrateClick () {
				this.visible = true
			},
			handleOk () {
				this.visible = false
			},
			handleReset () {
				this.filtrateTypeInfo.forEach(item => {
					return item.levelIndex = 0
				})
			},
			select (index, levelIndex) {
				this.filtrateTypeInfo[index].levelIndex = levelIndex
			},
			backSearch () {
				// this.$emit('changeCom', 'Clew')
				this.$emit('update:showComponent', 'Clew')
			},
			companyInfo () {
				// this.$emit('changeCom', 'ClewFive')
				this.$emit('update:showComponent', 'ClewFive')
			}
		}
	}
</script>

<style lang="less" scoped>
	.search-result {
		height: 100%;
		padding: 20px 20px 0 20px;
		font-size: 24px;
		.search-box {
			display: flex;
			align-items: center;
			height: 70px;
			margin-bottom: 30px;
			border-radius: 10px;
			box-shadow: 0 1px 5px #ccc;
			background: @whiteBg;
			.icon {
				width: 50px;
			}
			.search-box-middle {
				flex: 1;
				display: flex;
				align-items: center;
				height: 50px;
				border-radius: 25px;
				padding: 0 30px;
				color: #333;
				background-color: #f7f7f7;
				.connect-word {
					margin: 0 10px;
					color: #8e8e8e;
				}
				.trade {
					color: #59a9fc;
					margin-right: 10px;
				}
				.keyword {
					padding-left: 10px;
					border-left: 2px solid #e3e3e3;
				}
			}
		}
		.NavigationMap {
			height: 100%;
		}
		.switchover-result {
			// overflow: auto;
			position: relative;
			height: calc(~"100% - 100px");
			.result-box {
				height: calc(~"100% - 100px");
				overflow: auto;
				.result-box {
					margin-bottom: 80px;
					.item {
						margin-bottom: 20px;
						border-radius: 10px;
						box-shadow: 0 1px 5px #ccc;
						padding: 0 20px;
						color: #333;
						.top {
							display: flex;
							justify-content: space-between;
							align-items: center;
							height: 130px;
							.top-left {
								display: flex;
								flex-direction: column;
								justify-content: center;
								height: 100%;
								.title {
									font-weight: 700;
								}
								.address {
									margin-top: 10px;
									font-size: 14px;
									color: #8e8e8e;
								}
							}
							.top-right {
								font-size: 30px;
								color: #e98c2d;
								font-weight: 700;
							}
						}
						.middle {
							display: flex;
							align-items: center;
							height: 138px;
							border-top: 1px solid #eee;
							border-bottom: 1px solid #eee;
							.middle-item {
								flex: 1;
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: center;
								height: 100%;
								.middle-item-top {
									font-size: 22px;
									font-weight: 700;
								}
								.middle-item-bottom {
									font-size: 18px;
									color: #8e8e8e;
									margin-top: 10px;
								}
							}
							.line {
								width: 1px;
								height: 40px;
								background-color: #eee;
							}
						}
						.bottom {
							display: flex;
							align-items: center;
							height: 130px;
							.bottom-item {
								flex: 1;
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: center;
								font-size: 18px;
								font-weight: 600;
								.bottom-item-bottom {
									margin-top: 7px;
									color: #e98c2d;
									.rate {
										color: #e98c2d;
									}
								}
							}
						}
					}
				}
				.item {
					margin-bottom: 20px;
					border-radius: 10px;
					box-shadow: 0 1px 5px #ccc;
					padding: 0 20px;
					color: #333;
					background: @whiteBg;
					.top {
						display: flex;
						justify-content: space-between;
						align-items: center;
						height: 130px;
						.top-left {
							display: flex;
							flex-direction: column;
							justify-content: center;
							height: 100%;
							.title {
								font-weight: 700;
							}
							.address {
								margin-top: 10px;
								font-size: 14px;
								color: #8e8e8e;
							}
						}
						.top-right {
							font-size: 30px;
							color: #e98c2d;
							font-weight: 700;
						}
					}
					.middle {
						display: flex;
						align-items: center;
						height: 138px;
						border-top: 1px solid #eee;
						border-bottom: 1px solid #eee;
						.middle-item {
							flex: 1;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							height: 100%;
							.middle-item-top {
								font-size: 22px;
								font-weight: 700;
							}
							.middle-item-bottom {
								font-size: 18px;
								color: #8e8e8e;
								margin-top: 10px;
							}
						}
						.line {
							width: 1px;
							height: 40px;
							background-color: #eee;
						}
					}
					.bottom {
						display: flex;
						align-items: center;
						height: 130px;
						.bottom-item {
							flex: 1;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							font-size: 18px;
							font-weight: 600;
							.bottom-item-bottom {
								margin-top: 7px;
								color: #e98c2d;
								.rate {
									color: #e98c2d;
								}
							}
						}
					}
				}
			}
			.filtrate-btn-box {
				/*display: flex;
				justify-content: center;
				align-items: center;*/
				position: absolute;
				text-align: center;
				bottom: 0;
				right: 0;
				width: 100%;
				height: 100px;
				line-height: 100px;
				background-color: #fff;
				box-shadow: 0 -1px 5px #ccc;
				.filtrate-btn {
					width: 500px;
					height: 80px;
					color: #fff;
					font-size: 24px;
					background-color: #b51d22;
				}
			}
		}
	}
	.myModal {
		width: 1200px;
		/deep/ .ant-modal-header {
			background-color: #d21518;
			text-align: center;
			.ant-modal-title {
				font-size: 18px;
				color: #fff;
			}
		}
		/deep/ .ant-modal-footer {
			text-align: center;
			height: 80px;
			line-height: 60px;
			.ant-btn {
				width: 30%;
				height: 50px;
				font-size: 18px;
			}
			.left-btn {
				border-color: #d21518;
				color: #d21518;
			}
			.right-btn {
				background-color: #d21518;
				border-color: #d21518;
			}
		}
		.filtrate-type-box {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.filtrate-type-item {
				width: 49%;
				margin-bottom: 30px;
				.title {
					font-size: @font30;
					font-weight: 700;
					color: #333;
				}
				.explain {
					color: #8e8e8e;
				}
				.level {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					padding-bottom: 20px;
					.level-item {
						width: 30%;
						margin: 20px 0;
						padding: 10px 0;
						text-align: center;
						border-radius: 3px;
						background-color: #f6f3f7;
						cursor:pointer;
					}
					// .level-item:hover {
					//   color: #fff;
					//   background-color: #ff585a;
					// }
					.selected {
						color: @whiteBg;
						background-color: @redColor;
					}
				}
			}
		}
	}
</style>
